import { Group, Boxs, Button, Avatar } from 'saltui';
const { Box ,VBox} = Boxs;
const avatarColors = ['#38adff'];
import './PageDemo.less'
export default class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    let t=this;
    return <div className=" t-PR14 t-PL14 t-PT10 t-PB10 t-LH1_5 t-BCf">
      <div className="t-MB10">
          <Button type="minor">查看会议室预约情况</Button>           
      </div>
          
      <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar filter={prevName => prevName} name="1" colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>进入会议室列表页面</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
              点击应用中心"会议室"图标，进入会议室列表页面，点击顶部日历，切换时间查看会议室预约情况。
            </p>
          </Box>
        </VBox>
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
        
           <img src="../../../fmui/images/meeting_07.png" alt=""/>
        
        </div>
      </Group>

      <Group className="t-self-group-wrapper t-MB10">
        <h2 className="t-list-title t-FBH">
        <Avatar name="2" filter={prevName => prevName} colors={avatarColors} size={24} fontSize={16} className="t-MR4" />        
        <span style={{ color:'#'+'38ADFF'}}>查看会议室详情</span>
        </h2>
        <VBox className=" t-PT10 t-PB10 t-FS14">
          <Box>
            <p>
              点击列表中会议室，进入会议室详情页面，可查看该会议室的坐席人数、地址和提供的会议服务，查看会议室预约详情，点击时段区块，选择时段，发起会议申请。
            </p>
          </Box>
        </VBox>
        <div className="help-repair-img-list" vAlign="center" hAlign="center" >
        
           <img src="../../../fmui/images/meeting_18.png" alt=""/>
        
        </div>
      </Group>
    </div>
  }
};
